<template>
  <div>
    <el-form :model="formData" label-width="auto">
      <div
        v-if="
          cloneDetailData.afsInfo && cloneDetailData.afsInfo.faceList.length
        "
      >
        <div
          v-for="item in cloneDetailData.afsInfo.faceList"
          :key="item.faceId"
          :span="24"
        >
          <p class="text-center font-larger mb-20 font-weight-bold">
            {{ item.faceName.replace('M','B') }}{{ $t('FACE') }}
          </p>
          <div class="flex flex-wrap pr-20">
            <div
              v-for="(port, index) in item.portList"
              :key="port.id"
              style="width:25%"
              class="flex align-center mb-10"
            >
              <span class="port-label">{{ index + 1 < 10 ? `0${index + 1}` : `${index + 1}` }}</span>
              <el-input
                v-model="port.bizName"
                :placeholder="$t('SERVICE_NAME')"
                type="text"
                maxlength="60"
              />
            </div>
          </div>
        </div>
      </div>
      <NullData v-else />
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'DeviceConfigPortAfs',
    props: {
      cloneDetailData: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {
        formData: {}
      }
    },
    methods: {}
  }
</script>
<style lang="scss" scoped>
.port-label{
  width:80px;
  text-align: right;
  padding-right: 10px;
}
</style>
